import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Card } from "antd";
import * as React from "react";
import image from "../../images/hospital1.jpg";
import { HospitalInfo } from "../../type/HospitalData";

const styles = (theme: Theme) =>
  createStyles({
    root: {},
    hosImage: {
      "& img": {
        width: "120px",
        height: "120px",
        borderRadius: "10px"
      }
    },
    hospitalInfo: {
      display: "flex"
    },
    hospitalRight: {
      paddingLeft: "30px",
      "& p": {
        marginBottom: "5px",
        fontSize: "14px",
        "& span": {
          color: "#3aa0ff",
          marginRight: "10px"
        }
      }
    },
    title: {
      fontSize: "16px",
      marginBottom: "12px",
      "& span": {
        fontSize: "14px",
        marginRight: "10px",
        marginLeft: "20px",
        backgroundColor: "rgb(254,244,215)",
        color: "rgb(254,144,9)",
        borderRadius: "5px",
        padding: "3px"
      }
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  data: HospitalInfo;
}

/**
 * 医生选择界面头部的医院信息
 */
class ChooseDoctorHeader extends React.Component<Iprops> {
  public render() {
    const { classes, data } = this.props;
    return (
      <Card
        hoverable={true}
        bodyStyle={{
          backgroundColor: "rgb(245,251,255)",
          borderRadius: "5px"
        }}
      >
        <div className={classes.hospitalInfo}>
          <div className={classes.hosImage}>
            <img src={image} />
          </div>
          <div className={classes.hospitalRight}>
            <div className={classes.title}>
              {data.name}
              <span>
                {data.level}
                {data.category}
              </span>
            </div>
            <p>
              <span>{"联系电话:"}</span>
              {data.phone}
            </p>
            <p>
              <span>{"地址:"}</span>
              {data.location}
            </p>
            <p>
              <span>{"医院简介:"}</span>
              {data.introduction}
            </p>
          </div>
        </div>
      </Card>
    );
  }
}

export default withStyles(styles)(ChooseDoctorHeader);
